<template>
  <v-container class='pa-0' fluid>
  <v-card outlined>
    <v-card-title class='pb-0'>
      <span class='text-h5'>标签集</span>
      <v-spacer></v-spacer>
    </v-card-title>
    <v-card-text class='pa-4'>
      <div class='text-left'>
        <v-chip
          v-for='(item,index) in tagList'
          :key='item.ID'
          class='ma-2'
          color="secondary"
          :outlined='!item.selected'
          draggable
          @click='selectTag(item.TAG,index)'
          v-text='item.TAG'
        >
        </v-chip>
      </div>
    </v-card-text>
  </v-card>
  <images-gallery
    :images='images'
    :tag-name='selectedTag'
    :cardIcon='cardIcon'
    :menu-list='menuList'
    @freshList='freshList'
  />
</v-container>
</template>

<script>
  import imagesApi from '@/api/apiPath/imagesApi'
  import imagesGallery from '@/components/album/ImagesGallery'
  import _array from 'lodash/array'

  export default {
    name: 'ImagesTagIterator',
    props: {
      images: {
        default: []
      }
    },
    components: {
      imagesGallery
    },
    computed: {
      imgUrls() {
        return this.images.map(o => o.url)
      }
    },
    data() {
      return {
        tagList: [],
        selectedTag: '',
        cardIcon: [
          {
            icon: 'mdi-information',
            toolTip: '查看详细',
            func: 'showDetail'
          },
          {
            icon: 'mdi-delete',
            toolTip: '删除图片',
            func: 'deleteImgDialog'
          }
        ],
        menuList: [
          {
            icon: 'mdi-gesture',
            toolTip: '编辑图片',
            func: 'showProcess'
          }
        ]
      }
    },
    async created() {
      this.freshList()
      await this.getTagList()
      console.log(this.images)
    },
    watch: {
      selectedTag: {
        handler(val) {
          this.$emit('freshList',val ? { tag: val } : null)
        },
        immediate: true
      }
    },
    methods: {
      freshList() {
        this.$emit('freshList',this.selectedTag ? { tag: this.selectedTag } : null)
      },
      async getTagList() {
        const { data: result } = await imagesApi.getTagList()
        //去重
        const uniqResult = _array.uniqBy(result,'TAG')
        uniqResult.forEach(item => {
          item.selected = false
        })
        this.tagList = uniqResult
      },

      selectTag(tag,index) {
        this.tagList.forEach(item => {
          item.selected = false
        })
        if (tag !== this.selectedTag) {
          this.tagList[index].selected = true
          this.selectedTag = tag
        } else {
          this.selectedTag = ''
        }
      }
    }
  }
</script>

<style scoped>

</style>
